import QtQuick 2.0

Item {
    id: speedRoot
    width: parent.width
    height: width

    //定义最中心圆半径
    property var m_radius: parent.height*0.05
    property var m_colorCenter: "#287AB7"
    property var m_unitName: "km/h"
    property var m_value: 80
    property var m_textColor: "#4896AE"
    property var m_scaleRadius: m_radius*4.6

    //背景颜色
    Rectangle
    {
        id: background
        anchors.fill: parent
        color: "#F5EAEA"//"#242834"
    }

    Canvas
    {
        id: canvas
        width: parent.width
        height: parent.height

        onPaint:
        {
            var ctx = getContext("2d");

            drawSpeedPanel(ctx);
            ctx.restore();
        }

        function drawSpeedPanel(ctx)
        {
            var width = canvas.width
            var height = canvas.height
            ctx.clearRect(0,0,width,height);
            ctx.save();
            //将原点移到中心点,方便绘制
            ctx.translate(width/2,height/2);

            drawCenterCircle(ctx);
            drawUnitText(ctx);
            drawScale(ctx);
            drawOutCircle(ctx);
        }

        //先画最中心圆
        function drawCenterCircle(ctx)
        {
            drawCircle(ctx,m_radius,true,m_colorCenter,false,"")
        }

        //绘制单位以及速度值
        function drawUnitText(ctx)
        {
            //文字大小根据圆的半径自动调整,这里因为canvas没有设置文本字体大小属性，所以只能用字符串拼接了
            ctx.font = m_radius*1.1+ "px serif"
            ctx.textBaseline = "middle";

            //绘制上面的单位km/h
            ctx.fillText(m_unitName,-m_radius, -m_radius*2.4);
            //绘制下面的速度80
            ctx.fillText(m_value, -m_radius*0.6,m_radius*2.4);
        }

        //绘制刻度
        function drawScale(ctx)
        {
            var scaleNum = [0,10,20,30,40,50,60,70,80,90,100,110,120,130,140,150],i=0;
            for ( var deg = 360;deg > 0;deg-=6)
            {
                var spotX = m_scaleRadius*Math.sin(rads(deg))
                var spotY = m_scaleRadius*Math.cos(rads(deg))
                var spot = m_scaleRadius*0.02
                ctx.beginPath();
                ctx.fillStyle="#ccc"
                if ( deg%30 == 0)
                {
                    ctx.fillStyle="#333"
                    spot = m_scaleRadius*0.025
                    var textX = (m_scaleRadius*1.15)*Math.sin(rads(deg))
                    var textY = (m_scaleRadius*1.15)*Math.cos(rads(deg))
                    ctx.font = m_radius*0.5+"px Arial";
                    ctx.textBaseline = "middle";// 文字垂直对齐方式
                    ctx.textAlign = "center";   // 文字水平对齐方式
                    ctx.fillText(scaleNum[i],textX,textY);
                    i++
                }
                ctx.arc(spotX,spotY,spot,0,Math.PI*2);
                ctx.fill();
                ctx.closePath();
            }
        }

        //画最外面的大圆
        function drawOutCircle(ctx)
        {
            drawCircle(ctx,m_radius*6.6,false,"",true,m_colorCenter);
        }

        //弧度转换
        function rads(x)
        {
            return Math.PI*x/180;
        }

        //圆
        function drawCircle(ctx,radius,bFill,fillStyle,bStroke,strokeStyle)
        {
            if ( bFill )
            {
                ctx.fillStyle = fillStyle;
                ctx.beginPath();
                ctx.moveTo(0,0);
            }
            if ( bStroke )
            {
                ctx.strokeStyle = strokeStyle;
                ctx.beginPath();
                ctx.moveTo(0 + radius,0);
            }
            ctx.arc(0,0,radius,0,Math.PI*2,false);
            ctx.closePath();
            if (bFill )
            {
                ctx.fill();
            }
            if ( bStroke )
            {
                ctx.stroke();
            }
        }
    }
}
